<template>
    <div class="showDialog">
        <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" v-model="visible" title="" :show-close="false" align-center
            class="dialogAdd">
            <div class="dialog_content">
                <div class="dialog_header">
                    <div class="title">
                        <img src="../assets/images/rectangle07.png" alt="">
                        <span>修改密码</span>
                    </div>
                    <!-- <img class="close" src="../assets/images/close.png" @click="closeDialog" alt=""> -->
                </div>
                <div class="dialog_details">
                    <div class="details">
                        <el-form class="form" ref="ruleFormRef" label-width="110px" :model="formParams" :rules="rules">
                            <el-form-item label="当前密码" prop="oldPwd">
                                <el-input v-model.trim="formParams.oldPwd" type="password" placeholder="请输入当前密码"
                                    clearable></el-input>
                            </el-form-item>
                            <el-form-item label="新密码" prop="newPwd">
                                <el-input v-model.trim="formParams.newPwd" type="password" placeholder="8~12位,包含大小写字母+数字+特殊字符"
                                    clearable></el-input>
                            </el-form-item>
                            <el-form-item label="新密码确认" prop="newPwdConfirm">
                                <el-input v-model.trim="formParams.newPwdConfirm" type="password"
                                    placeholder="8~12位,包含大小写字母+数字+特殊字符" clearable></el-input>
                            </el-form-item>
                            <el-form-item>
                                <div class="btn">
                                    <el-button type="warning" @click="savePwd(ruleFormRef)">保 存</el-button>
                                    <el-button @click="closeDialog">取 消</el-button>
                                   
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>

        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { CheckPassWord } from "@/utils/utils";
import { editPwdSelf } from "@/http/user";
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    }
})
let visible = ref(false);

const formParams = reactive({
    newPwd: "",//新密码
    newPwdConfirm: "",//确认密码
    oldPwd: "",//旧密码
})

const ruleFormRef = ref<FormInstance>()

//校验当前密码
const validate_oldPwd =(rule: any, value: any, callback: any)=>{
    if (value === '') {
        callback(new Error('请输入当前密码'))
    } else {
        callback()
    }
}

//校验新密码
const validate_newPwd = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入新密码'))
    } else {
        if (!CheckPassWord(formParams.newPwd)) {
            callback(new Error('密码长度8~12位，包含大小写字母+数字+特殊字符!'))
        } else {
            callback()
        }

    }
}
//校验密码确认
const validate_newPwdConfirm = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入新密码'))
    } else {
        if (!CheckPassWord(formParams.newPwd)) {
            callback(new Error('密码长度8~12位，包含大小写字母+数字+特殊字符!'))
        } else if (formParams.newPwdConfirm != formParams.newPwd) {
            callback(new Error('新密码确认与新密码不一致!'))
        } else {
            callback()
        }
    }
}


const rules = reactive<FormRules>({
    oldPwd: [{ validator: validate_oldPwd, trigger: 'blur' }],
    newPwd: [{ validator: validate_newPwd, trigger: 'blur' }],
    newPwdConfirm: [{ validator: validate_newPwdConfirm, trigger: 'blur' }],
})

watch(() => props.dialogVisible, (newValue, oldValue) => {
    visible.value = newValue;
});

//emit(父组件中的自定义方法)
const emit = defineEmits(['closeDialog']);
//关闭弹窗
const closeDialog = () => {
    emit("closeDialog");
}

const savePwd = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            editPwdSelf(formParams).then(res => {
                ElMessage({
                    message: '操作成功!',
                    type: 'success',
                    offset: document.getElementsByTagName('body')[0].offsetHeight / 2 - 24
                })
                emit("closeDialog");
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

</script>

<style scoped lang="scss">
.showDialog {
    :deep(.dialogAdd) {
        width: 490px;
        min-height: 300px;
        background: rgba(255, 255, 255, 1);
        border-radius: 2px;
        box-shadow: 0px 6px 16px -8px rgba(0, 0, 0, 0.08), 0px 9px 28px 0px rgba(0, 0, 0, 0.05), 0px 12px 48px 16px rgba(0, 0, 0, 0.03);

        .el-dialog__header {
            padding: 0;

        }

        .el-dialog__body {
            padding: 0;

            .dialog_content {
                .dialog_header {
                    padding: 0;
                    height: 59px;
                    padding: 8px 32px 4px 62px;
                    line-height: 52px;
                    font-size: 16px;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 1);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom: 1px dashed rgba(112, 105, 95, 1);

                    .title {
                        display: flex;
                        align-items: center;

                        img {
                            width: 4px;
                            height: 22px;
                            margin-right: 15px;
                        }

                    }

                    .close {
                        width: 25px;
                        height: 25px;
                        cursor: pointer;

                    }
                }

                .dialog_details {
                    padding: 25px 45px 0 48px;
                    font-size: 16px;
                    font-weight: 400;
                    letter-spacing: 0px;
                    line-height: 30px;
                    color: rgba(0, 0, 0, 1);

                    .details {
                        padding: 0 0 25px 7px;
                        align-items: center;

                    }

                }

            }
        }


    }

}

.el-form {
    display: block;

    .el-form-item {
        margin-bottom: 15px;
        .el-input {
            width: 280px;
        }
    }

    .btn {
        width: 100%;
        text-align: right;
        padding-right: 50px;
    }
}
</style>
